<!-- 新品 -->
<template>
  <div class="newsGoods-main">
    <Navbar :title="title" />
    <div class="banner">
      <img
        class="bannerImg"
        src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png"
        alt
      />
    </div>
    <div class="sortnav">
      <div @click="changeTab(0)" :class="[nowIndex==0?'active':'']">综合</div>
      <div
        @click="changeTab(1)"
        class="price"
        :class="[nowIndex==1?'active':'',order=='desc'?'desc':'asc']"
      >价格</div>
      <div @click="changeTab(2)" :class="[nowIndex==2?'active':'']">分类</div>
    </div>
    <div class="newsGoodsList">
      <div class="newsGoodsItem" v-for="item in homeRecommendList" :key="item.id">
        <img class="newGoodsItemImg" :src="item.list_pic_url" alt />
        <div class="newsGoodsItemDes">
          <div class="newsGoodsItemName">{{item.name}}</div>
          <div class="newsGoodsItemPrice">¥ {{item.retail_price}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 本章重点:1.掌握query的接收参数的做法  2.点击切换显示不同的类名属性changeTab()
import Navbar from "@/components/Navbar";
import homeApi from "@/api/home/index";
export default {
  name: "newsGoods",
  components: {
    Navbar,
  },
  data() {
    return {
      title: "商品推荐",
      isNew: "",
      isHot: "",
      order: "",
      nowIndex: 0,
      homeRecommendList: [],
    };
  },
  created() {
    if (this.$route.query.isNew) {
      this.isNew = this.$route.query.isNew;
    }
    if (this.$route.query.isHot) {
      this.isHot = this.$route.query.isHot;
    }
    this.getnewsGoods();
  },
  methods: {
    getnewsGoods() {
      homeApi
        .homeRecommendList({
          isNew: this.isNew,
          isHot: this.isHot,
          order: this.order,
        })
        .then((res) => {
          this.homeRecommendList = res.data;
        });
    },
    changeTab(index) {
      this.nowIndex = index;
      if (index == 1) {
        this.order = this.order == "asc" ? "desc" : "asc";
      } else {
        this.order = "";
      }
      this.getnewsGoods();
    },
  },
};
</script>
<style lang='scss' scoped>
.newsGoods-main {
  .banner {
    height: 139px;
    .bannerImg {
      height: 100%;
      width: 100%;
    }
  }
  .sortnav {
    height: 39px;
    text-align: center;
    line-height: 39px;
    display: flex;
    justify-content: space-between;
    background-color: $bagColor;
    div {
      width: 33.3%;
    }
    .active {
      color: $baseColor;
    }
    .price {
      background: url(//yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png)
        80px center no-repeat;
      background-size: 10px 14px;
    }
    .active.desc {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png)
        80px center no-repeat;
      background-size: 10px 14px;
    }
    .active.asc {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png)
        80px center no-repeat;
      background-size: 10px 14px;
    }
  }
  .newsGoodsList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 5px;
    .newsGoodsItem {
      width: 49%;
      background-color: $bagColor;
      height: 240px;
      margin-bottom: 3px;
      text-align: center;
      .newGoodsItemImg {
        width: 151px;
        height: 151px;
      }
      .newsGoodsItemDes {
        .newsGoodsItemPrice {
          padding-top: 8px;
          color: $baseColor;
          font-size: 15px;
        }
      }
    }
  }
}
</style>